<script setup lang="ts">
import axios from 'axios';
import { onMounted, ref } from 'vue';

export type ChannelItem = {
    id: number;
    name: string;
};

// 频道接口响应数据
export type ChannelResData = {
    data: {
        channels: ChannelItem[];
    };
    message: string;
};
const list = ref<ChannelItem[]>([])
onMounted(async () => {
    const res = await axios.get<ChannelResData>('http://geek.itheima.net/v1_0/channels')
    list.value = res.data.data.channels
})
// 接受父子传参 高亮显示
const props = defineProps<{ channelID: number }>()
// 子传父
defineEmits<{ (e: 'changeChannelID', id: number): void }>()

</script>

<template>
    <div class="channel-nav">
        <nav class="list">
            <a class="item" :class="{ active: item.id === channelID }" href="javascript:;" v-for="item in list"
                :key="item.id" @click="$emit('changeChannelID', item.id)">
                {{ item.name }}
            </a>
        </nav>
    </div>
</template>